<template>
  <page-wrap stay-still back hide-tab title="服务评价">
    <view class="card">
      <view class="card-name">{{
        isConsultant ? "用户评价" : "本次服务您是否满意？"
      }}</view>
      <view class="card-info">
        <view class="card-info-item">
          <text class="label">{{
            isConsultant ? "用户名称：" : "服务顾问："
          }}</text>
          <text class="value">{{ consultantName }}</text>
        </view>
        <view class="card-info-item">
          <text class="label">服务项：</text>
          <text class="value">{{ serviceName }}</text>
        </view>
      </view>
      <view class="star-box">
        <view class="label">满意度：</view>
        <view class="star">
          <u-rate
            :count="5"
            size="46"
            v-model="star"
            active-color="#f75a3e"
            :disabled="disabled"
            @change="handleRateChange"
          ></u-rate>
        </view>
        <view class="desc">{{ desc }}</view>
      </view>
      <view class="check">
        <u-checkbox-group
          v-if="!disabled"
          active-color="#f75a3e"
          @change="checkboxGroupChange"
        >
          <u-checkbox
            v-model="item.checked"
            v-for="(item, index) in checkBox"
            :key="index"
            :name="item.key"
            >{{ item.value }}</u-checkbox
          >
        </u-checkbox-group>
        <text v-else>{{ commentContent.join("，") }}</text>
      </view>
      <view class="other">
        <u-input
          v-model="extraComment"
          type="textarea"
          :border="true"
          :disabled="disabled"
          height="200"
          placeholder="请输入其他说明"
          :auto-height="true"
        />
      </view>
      <view class="footer" v-if="!disabled">
        <u-button
          type="primary"
          shape="circle"
          class="save-btn"
          @click="handleEvaluate"
          >提交评价</u-button
        >
      </view>
    </view>
  </page-wrap>
</template>

<script>
import { subComment, commentTemplate, viewComment } from "@/api/modules/career";
export default {
  data() {
    return {
      star: 0,
      extraComment: "",
      commentContentKey: "",
      serviceRecordId: "",
      consultantName: "",
      serviceName: "",
      rateList: [],
      checkBox: [],
      desc: "",
      disabled: false,
      commentContent: [],
      isConsultant: getApp().globalData.userIsConsultant,
    };
  },
  onLoad(opt) {
    this.serviceRecordId = opt.serviceRecordId || "";
    this.consultantName = opt.consultantName || "";
    this.serviceName = opt.serviceName || "";
  },
  created() {},
  mounted() {
    this.commentTemplateFn();
  },
  methods: {
    viewCommentFn() {
      const params = {
        serviceRecordId: this.serviceRecordId,
      };
      viewComment(params).then((res) => {
        if (res.code == 200 && res.data) {
          this.star = res.data.star;
          this.commentContentKey = res.data.commentContentKey.split(",");
          this.extraComment = res.data.extraComment;
          this.handleRateChange(this.star);
          this.getCommentContent(this.star);
          this.disabled = true;
        }
      });
    },
    getCommentContent(val) {
      let commentContent = [];
      if (val == 1 || val == 2 || val == 0) {
        this.rateList[0].content.forEach((item) => {
          this.commentContentKey.forEach((_item) => {
            if (_item == item.key) {
              commentContent.push(item.value);
            }
          });
        });
      }
      if (val == 3) {
        this.rateList[1].content.forEach((item) => {
          this.commentContentKey.forEach((_item) => {
            if (_item == item.key) {
              commentContent.push(item.value);
            }
          });
        });
      }
      if (val == 4 || val == 5) {
        this.rateList[2].content.forEach((item) => {
          this.commentContentKey.forEach((_item) => {
            if (_item == item.key) {
              commentContent.push(item.value);
            }
          });
        });
      }
      this.commentContent = commentContent;
    },
    checkboxGroupChange(val) {
      this.commentContentKey = val.join(",");
    },
    handleRateChange(val) {
      if (val == 1 || val == 2 || val == 0) {
        this.desc = this.rateList[0].desc;
        this.checkBox = this.rateList[0].content;
      }
      if (val == 3) {
        this.desc = this.rateList[1].desc;
        this.checkBox = this.rateList[1].content;
      }
      if (val == 4 || val == 5) {
        this.desc = this.rateList[2].desc;
        this.checkBox = this.rateList[2].content;
      }
    },
    commentTemplateFn() {
      commentTemplate().then((res) => {
        res.data.forEach((item) => {
          item.content.forEach((_item) => {
            _item.checked = false;
          });
        });
        this.rateList = res.data;
        this.viewCommentFn();
      });
    },
    handleEvaluate() {
      const params = {
        serviceRecordId: this.serviceRecordId,
        star: this.star,
        commentContentKey: this.commentContentKey,
        extraComment: this.extraComment,
      };
      subComment(params).then((res) => {
        if (res.code == 200) {
          uni.showToast({ icon: "", title: "评价成功" });
          setTimeout(() => {
            uni.navigateBack();
          }, 300);
        } else {
          uni.showToast({ icon: "", title: res.status_desc });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.card {
  padding: 32rpx;
  background-color: #fff;
  position: relative;
  &-name {
    font-size: 36rpx;
    text-align: center;
    padding-bottom: 32rpx;
  }
  &-info {
    &-item {
      padding: 12rpx 0;
    }
  }
  .label {
    color: #555;
  }
  .star-box {
    display: flex;
    align-items: center;
    margin-top: 40rpx;
  }
  .desc {
    margin-left: 16rpx;
  }
  .check {
    margin-top: 12px;
  }
  .other {
    margin-top: 32rpx;
  }
  .footer {
    display: flex;
    justify-content: center;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 99;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    .save-btn {
      width: 90%;
      margin: 82rpx 0 4rpx;
    }
  }
}
</style>
